<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d animation</title>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>
<body>
<div id="wrapper">
    <h1>3d animation using pure CSS3<small>Movie Posters Example</small></h1>
    <h2><a href="http://www.marcofolio.net/" title="Visit Marcofolio.net">Marcofolio.net</a></h2>
    <div id="content">
        <p class="info">Here's an example of pretty powerful CSS3 animation and 3d effects. Using the <code>perspective</code>, <code>transform</code> and <code>transition</code> properties, we can create a 3d animation effect. Simply hover over the movie posters below to see the effect in it's full glory.</p>
        <p class="info">Just make sure you're running the latest version of a <code>-webkit</code> based browser (Apple Safari or Google Chrome) to see the effect. If you don't have any of those browers, visit the article to see a video of the effect.</p>
        <ul id="movieposters">
            <li>
                <img src="images/01_iron_man_2.png" alt="Iron Man 2" />
                <div class="movieinfo">
                    <h3>Iron Man 2</h3>
                    <p>With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony...</p>
                    <a href="http://www.imdb.com/title/tt1228705/" title="Iron Man 2">More info</a>
                </div>
            </li>
            <li>
                <img src="images/02_the_last_airbender.jpg" alt="The Last Airbender" />
                <div class="movieinfo">
                    <h3>The Last Airbender</h3>
                    <p>The story follows the adventures of Aang, a young successor to a long line of Avatars, who must put his...</p>
                    <a href="http://www.imdb.com/title/tt0938283/" title="Iron Man 2">More info</a>
                </div>
            </li>
            <li>
                <img src="images/03_tron_legacy.png" alt="Tron Legacy" />
                <div class="movieinfo">
                    <h3>Tron Legacy</h3>
                    <p>Sam Flynn, the tech-savvy 27-year-old son of Kevin Flynn, looks into his father's disappearance and finds...</p>
                    <a href="http://www.imdb.com/title/tt1104001/" title="Tron Legacy">More info</a>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>